<!Doctype html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>前端面试几个重要知识点 | 菜鸟教程</title>

  <meta name='robots' content='max-image-preview:large' />
<link rel='stylesheet' id='classic-theme-styles-css' href='../0/classic-themes.min.css?ver=6.2' type='text/css' media='all' />
<link rel="canonical" href="../w3cnote/front-end-interview-a-few-important-points-of-knowledge.html" />
<meta name="keywords" content="前端面试几个重要知识点">
<meta name="description" content="1、 viewport    width: 设置viewport宽度，为一个正整数，或字符串 device-width device-width: 设备宽度 height: 设置viewport高度，一般设置了宽度，会自动解析出高度，可以不用设置 initial-scale: 默认缩放比例（初始缩放比例），为一个数字，可以带小数 minimum-scale: 允许用户最小缩放比例，为一个数字，可以带小数 maximum-scale: 允..">
		
	<link rel="shortcut icon" href="https://static.runoob.com/images/favicon.ico">
	<link rel="stylesheet" href="../0/style.css?v=1.170" type="text/css" media="all" />	
	<link rel="stylesheet" href="../0/font-awesome.min.css" media="all" />	
  <!--[if gte IE 9]><!-->
  <script src=""></script>
  <!--<![endif]-->
  <!--[if lt IE 9]>
     <script src=""></script>
     <script src=""></script>
  <![endif]-->
  <link rel="apple-touch-icon" href="https://static.runoob.com/images/icon/mobile-icon.png"/>
  <meta name="apple-mobile-web-app-title" content="菜鸟教程">
</head>
<body>

<!--  头部 -->
<div class="container logo-search">

  <div class="col search row-search-mobile">
    <form action="index.php">
      <input class="placeholder" placeholder="搜索……" name="s" autocomplete="off">
      
    </form>
  </div>

  <div class="row">
    <div class="col logo">
      <h1><a href="../">菜鸟教程 -- 学的不仅是技术，更是梦想！</a></h1>
    </div>
        <div class="col right-list"> 
    <button class="btn btn-responsive-nav btn-inverse" data-toggle="collapse" data-target=".nav-main-collapse" id="pull" style=""> <i class="fa fa-navicon"></i> </button>
    </div>
        
    <div class="col search search-desktop last">
      <div class="search-input" >
      <form action="//www.runoob.com/" target="_blank">
        <input class="placeholder" id="s" name="s" placeholder="搜索……"  autocomplete="off" style="height: 44px;">
      </form>
      
      </div>
    </div>
  </div>
</div>



<!-- 导航栏 -->
<div class="container navigation">
    <div class="row">
        <div class="col nav">
            

                        <ul class="pc-nav" id="note-nav">
                <li><a href="../">首页</a></li>
                <li><a href="../w3cnote">笔记首页</a></li>
                <li><a href="../w3cnote/android-tutorial-intro.html" title="Android 基础入门教程">Android</a></li>
                <li><a href="../w3cnote/es6-tutorial.html" title="ES6 教程">ES6 教程</a></li>
                <li><a href="../w3cnote/ten-sorting-algorithm.html" title="排序算法">排序算法</a></li>
                <li><a href="../w3cnote/hadoop-tutorial.html" title="Hadoop 教程">Hadoop</a></li>
                <li><a href="../w3cnote/zookeeper-tutorial.html" title="Zookeeper 教程">Zookeeper</a></li>
                <li><a href="../w3cnote/verilog-tutorial.html" title="Verilog 教程">Verilog</a></li>
                <li><a href="../w3cnote_genre/code" title="编程技术">编程技术</a></li> 
                <li><a href="../w3cnote_genre/coderlife" title="程序员人生">程序员人生</a></li>
                
                <!--<li><a href="javascript:;" class="runoob-pop">登录</a></li>
                
                
                        <li>
                <a style="font-weight:bold;" href="../linux/linux-tutorial.html#yunserver" target="_blank" onclick="_hmt.push(['_trackEvent', 'aliyun', 'click', 'aliyun'])" title="kkb">云服务器</a>
                </li>
                <li><a href="http://gk.link/a/104mQ" target="_blank" style="font-weight: bold;"onclick="_hmt.push(['_trackEvent', '极客时间', 'click', 'jike'])" title="我的圈子">极客时间</a></li>
            
                
                <li><a target="_blank" href="../shoppinglist" rel="nofollow">知识店铺</a></li> 
        -->
            </ul>
                        
              
            <ul class="mobile-nav">
                <li><a href="../w3cnote">首页</a></li>
                <li><a href="../w3cnote_genre/android" target="_blank" title="Android 基础入门教程">Android</a></li>
                <li><a href="../w3cnote/es6-tutorial.html" target="_blank" title="ES6 教程">ES6</a></li>
                <li><a href="../w3cnote_genre/joke" target="_blank" title="程序员笑话">逗乐</a></li>
                
                <a href="javascript:void(0)" class="search-reveal">Search</a> 
            </ul>
            
        </div>
    </div>
</div>


<!--  内容  -->
<div class="container main">
	<div class="row">

		<div class="col middle-column big-middle-column">
	 			<div class="article">
			<div class="article-heading">
				<h2>前端面试几个重要知识点</h2>				<h3><em>分类</em> <a href="../w3cnote_genre/code" title="编程技术" >编程技术</a> </h3>
			</div>
			<div class="article-body note-body">
				<div class="article-intro">
					<h2>1、 viewport</h2>

<pre>&lt;meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /&gt;</pre>
<ul><li>
<strong>width</strong>: 设置viewport宽度，为一个正整数，或字符串 device-width</li><li>
<strong>device-width</strong>: 设备宽度</li><li>
<strong>height</strong>: 设置viewport高度，一般设置了宽度，会自动解析出高度，可以不用设置</li><li>
<strong>initial-scale</strong>: 默认缩放比例（初始缩放比例），为一个数字，可以带小数</li><li>
<strong>minimum-scale</strong>: 允许用户最小缩放比例，为一个数字，可以带小数</li><li>
<strong>maximum-scale</strong>: 允许用户最大缩放比例，为一个数字，可以带小数</li><li>
<strong>user-scalable</strong>: 是否允许手动缩放</li></ul>


<p><strong>延伸提问：怎样处理 移动端 1px 被渲染成 2px 问题？</strong></p>

<p>1、局部处理</p>
<p>meta 标签中的 viewport 属性 ，initial-scale 设置为 1 </p>
<p>rem 按照设计稿标准走，外加利用 transfrome 的 scale(0.5) 缩小一倍即可；</p>
<p>2、全局处理</p>
<p>meta 标签中的 viewport 属性 ，initial-scale 设置为 0.5</p>
<p>rem 按照设计稿标准走即可</p>


<hr>
<h2>2、跨域的几种方式</h2>

<p><strong>首先了解下浏览器的同源策略</strong></p>
<p>同源策略/SOP（Same origin policy）是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSRF等攻击。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。</p>

<p>那么怎样解决跨域问题的呢？</p>

<p><strong>1 通过jsonp跨域，原生实现：</strong></p>
<pre>&lt;script&gt;
var script = document.createElement('script');
script.type = 'text/javascript';

// 传参并指定回调执行函数为onBack
script.src = 'http://www.....:8080/login?user=admin&amp;callback=onBack';
document.head.appendChild(script);

// 回调执行函数
function onBack(res) {
    alert(JSON.stringify(res));
}
&lt;/script&gt;</pre>
<p><strong>2、document.domain + iframe 跨域  </strong></p>
<p>此方案仅限主域相同，子域不同的跨域应用场景。</p>
<p>1.）父窗口：(http://www.domain.com/a.html)</p>

<pre>&lt;iframe id="iframe" src="http://child.domain.com/b.html"&gt;&lt;/iframe&gt;
&lt;script&gt;
document.domain = 'domain.com';
var user = 'admin';
&lt;/script&gt;</pre>
<p>2.）子窗口：(http://child.domain.com/b.html)</p>
            
<pre>&lt;script&gt;
document.domain = 'domain.com';
// 获取父窗口中变量
alert('get js data from parent ---&gt; ' + window.parent.user);
&lt;/script&gt;</pre>

<p>弊端：请看下面渲染加载优化</p>

<p>3、nginx 代理跨域</p>
<p>4、nodejs 中间件代理跨域</p>
<p>5、后端在头部信息里面设置安全域名</p>
<hr>
<h2>3、渲染优化</h2>
<p>1.禁止使用iframe（阻塞父文档onload事件）</p>
<ul><li>
iframe会阻塞主页面的Onload事件；</li><li>
搜索引擎的检索程序无法解读这种页面，不利于SEO;</li><li>
iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。</li></ul>
<p>使用 iframe 之前需要考虑这两个缺点。如果需要使用 iframe，最好是通过 javascript 动态给 iframe 添加 src 属性值，这样可以绕开以上两个问题。</p>

<p>2.禁止使用gif图片实现loading效果（降低CPU消耗，提升渲染性能）；</p>
<p>3、使用CSS3代码代替JS动画（尽可能避免重绘重排以及回流）；</p>
<p>4、对于一些小图标，可以使用base64位编码，以减少网络请求。但不建议大图使用，比较耗费CPU；</p>
<p>小图标优势在于：</p>
<ul><li>1.减少HTTP请求；
</li><li>2.避免文件跨域；
</li><li>3.修改及时生效；</li></ul>
<p>5、页面头部的<style></style> 会阻塞页面；（因为 Renderer进程中 JS线程和渲染线程是互斥的）；</p>
<p>6、页面头部<script</script> 会阻塞页面；（因为 Renderer进程中 JS线程和渲染线程是互斥的）；</p>
<p>7、页面中空的 href 和 src 会阻塞页面其他资源的加载 (阻塞下载进程)；</p>
    
<p>8、网页Gzip，CDN托管，data缓存 ，图片服务器；</p>
<p>9、前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数</p>
<p>10、用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。</p>
<p>11、当需要设置的样式很多时设置className而不是直接操作style。</p>
<p>12、少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。</p>
<p>13、避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性)。</p>
<p>14、图片预加载，将样式表放在顶部，将脚本放在底部  加上时间戳。</p>
<p>15、 避免在页面的主体布局中使用table，table要等其中的内容完全下载之后才会显示出来，显示比div+css布局慢。</p>
<p>对普通的网站有一个统一的思路，就是尽量向前端优化、减少数据库操作、减少磁盘IO。 向前端优化指的是，在不影响功能和体验的情况下，能在浏览器执行的不要在服务端执行，能在缓存服务器上直接返回的不要到应用服务器，程序能直接取得的结果不要到外部取得，本机内能取得的数据不要到远程取，内存能取到的不要到磁盘取，缓存中有的不要去数据库查询。减少数据库操作指减少更新次数、缓存结果减少查询次数、将数据库执行的操作尽可能的让你的程序完成（例如join查询），减少磁盘IO指尽量不使用文件系统作为缓存、减少读写文件次数等。程序优化永远要优化慢的部分，换语言是无法"优化"的。</p>
<hr>
<h2>4、事件的各个阶段</h2>

<pre>1：捕获阶段 ---&gt; 2：目标阶段 ---&gt; 3：冒泡阶段
document   ---&gt; target目标 ----&gt; document</pre>

<p>由此，addEventListener 的第三个参数设置为 true 和 false 的区别已经非常清晰了：</p>
<ul><li>
true 表示该元素在事件的"捕获阶段"（由外往内传递时）响应事件；
</li><li>
false 表示该元素在事件的"冒泡阶段"（由内向外传递时）响应事件。
</li></ul>

<hr>
<h2>5、let var const</h2>
<ul><li>
<p><strong>let</strong>: 允许你声明一个作用域被限制在块级中的变量、语句或者表达式 let 绑定不受变量提升的约束，这意味着let声明不会被提升到当前，该变量处于从块开始到初始化处理的"暂存死区"。</p>
</li><li>
<p><strong>var</strong>: 声明变量的作用域限制在其声明位置的上下文中，而非声明变量总是全局的, 由于变量声明（以及其他声明）总是在任意代码执行之前处理的，所以在代码中的任意位置声明变量总是等效于在代码开头声明。</p>
</li><li>
<p>const 声明创建一个值的只读引用 (即指针)，这里就要介绍下 JS 常用类型: String、Number、Boolean、Array、Object、Null、Undefined。其中基本类型有 Undefined、Null、Boolean、Number、String，保存在栈中；复合类型 有 Array、Object ，保存在堆中； 基本数据当值发生改变时，那么其对应的指针也将发生改变，故造成 const申明基本数据类型时，再将其值改变时，将会造成报错， 例如 const a = 3 ; a = 5 时 将会报错；但是如果是复合类型时，如果只改变复合类型的其中某个Value项时， 将还是正常使用；</p></li></ul>    
<hr>
<h2>6、箭头函数</h2>
<p>语法比函数表达式更短，并且不绑定自己的 this，arguments，super 或 new.target。这些函数表达式最适合用于非方法函数，并且它们不能用作构造函数。</p>


<hr>
<h2>7、快速的让一个数组乱序</h2>
<pre>var arr = [1,2,3,4,5,6,7,8,9,10];
arr.sort(function(){
    return Math.random() - 0.5;
})
console.log(arr);</pre>
<p>此处解释：（语言组织能力不足，请勿吐槽）</p>

<p><img decoding="async" src="//www.runoob.com/wp-content/uploads/2018/03/631413101-5a8f7bbc29deb_articlex.png"></p>

<p>首先，当 return 的值：</p>
<ul><li>
小于 0 ，那么 a 会被排列到 b 之前；</li><li>
等于 0 ， a 和 b 的相对位置不变；</li><li>
大于 0 ， b 会被排列到 a 之前；</li></ul>

<p>这里你会发现起始的时候数组是正序排列，每当进行一次排列的时候， 都会先随机一个随机数（注意这里的每一次排列 指 每一个红框指一次排列， 共9次排列 ， 一次排列中可能存在多次比较）；</p>

<p>当一次排列的随机数大于 0.5 时 将会进行第二次比较， 当第二次随机数 仍然大于 0.5 时 ，将会再进行一次比较， 直到 随机数大于 0.5 或者排列到第一位；</p>

<p>当一次排列的随机数 小于 0.5 时 当前比较的两项索引将不会改变 ，继续下一次的排列；</p>

<hr>
<h2>8、字体font-family</h2>

<pre>@ 宋体      SimSun
@ 黑体      SimHei
@ 微软雅黑   Microsoft Yahei
@ 微软正黑体 Microsoft JhengHei
@ 新宋体    NSimSun
@ 新细明体  MingLiU
@ 细明体    MingLiU
@ 标楷体    DFKai-SB
@ 仿宋     FangSong
@ 楷体     KaiTi
@ 仿宋_GB2312  FangSong_GB2312
@ 楷体_GB2312  KaiTi_GB2312  
@
@ 说明：中文字体多数使用宋体、雅黑，英文用Helvetica

body { font-family: Microsoft Yahei,SimSun,Helvetica; }</pre>


<hr>
<h2>9、可能用到的meta标签</h2>
<pre>&lt;!-- 设置缩放 --&gt;
&lt;meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" /&gt;
&lt;!-- 可隐藏地址栏，仅针对IOS的Safari（注：IOS7.0版本以后，safari上已看不到效果） --&gt;
&lt;meta name="apple-mobile-web-app-capable" content="yes" /&gt;
&lt;!-- 仅针对IOS的Safari顶端状态条的样式（可选default/black/black-translucent ） --&gt;
&lt;meta name="apple-mobile-web-app-status-bar-style" content="black" /&gt;
&lt;!-- IOS中禁用将数字识别为电话号码/忽略Android平台中对邮箱地址的识别 --&gt;
&lt;meta name="format-detection"content="telephone=no, email=no" /&gt;</pre>

<p>其他meta标签</p>
<pre>&lt;!-- 启用360浏览器的极速模式(webkit) --&gt;
&lt;meta name="renderer" content="webkit"&gt;
&lt;!-- 避免IE使用兼容模式 --&gt;
&lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
&lt;!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 --&gt;
&lt;meta name="HandheldFriendly" content="true"&gt;
&lt;!-- 微软的老式浏览器 --&gt;
&lt;meta name="MobileOptimized" content="320"&gt;
&lt;!-- uc强制竖屏 --&gt;
&lt;meta name="screen-orientation" content="portrait"&gt;
&lt;!-- QQ强制竖屏 --&gt;
&lt;meta name="x5-orientation" content="portrait"&gt;
&lt;!-- UC强制全屏 --&gt;
&lt;meta name="full-screen" content="yes"&gt;
&lt;!-- QQ强制全屏 --&gt;
&lt;meta name="x5-fullscreen" content="true"&gt;
&lt;!-- UC应用模式 --&gt;
&lt;meta name="browsermode" content="application"&gt;
&lt;!-- QQ应用模式 --&gt;
&lt;meta name="x5-page-mode" content="app"&gt;
&lt;!-- windows phone 点击无高光 --&gt;
&lt;meta name="msapplication-tap-highlight" content="no"&gt;</pre>

<hr>
<h2>10、消除 transition 闪屏</h2>

<pre>.css {
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
}</pre>
<p>过渡动画（在没有启动硬件加速的情况下）会出现抖动的现象， 以上的解决方案只是改变视角来启动硬件加速的一种方式；启动硬件加速的另外一种方式： </p>
<pre>.css {
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}</pre>

<p><strong>启动硬件加速</strong></p>
<p>最常用的方式：translate3d、translateZ、transform</p>

<p>opacity 属性/过渡动画（需要动画执行的过程中才会创建合成层，动画没有开始或结束后元素还会回到之前的状态）</p>

<p>will-chang 属性（这个比较偏僻），一般配合opacity与translate使用（而且经测试，除了上述可以引发硬件加速的属性外，其它属性并不会变成复合层）。</p>

<p>弊端：硬件加速会导致 CPU 性能占用量过大，电池电量消耗加大 ；因此尽量避免泛滥使用硬件加速。</p>


<hr>
<h2>11、android 4.x bug</h2>
<ul><li>
1.三星 Galaxy S4中自带浏览器不支持border-radius缩写</li><li>
2.同时设置border-radius和背景色的时候，背景色会溢出到圆角以外部分</li><li>
3.部分手机(如三星)，a链接支持鼠标:visited事件，也就是说链接访问后文字变为紫色</li><li>
4.android无法同时播放多音频audio</li><li>
5.oppo 的border-radius 会失效</li></ul>

<hr>
<h2>12、JS 判断设备来源</h2>

<pre>// 判断移动端设备
function deviceType(){
    var ua = navigator.userAgent;
    var agent = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];    
    for(var i=0; i&lt;len,len = agent.length; i++){
        if(ua.indexOf(agent[i])&gt;0){         
            break;
        }
    }
}
deviceType();
window.addEventListener('resize', function(){
    deviceType();
})


// 判断微信浏览器
function isWeixin(){
    var ua = navigator.userAgent.toLowerCase();
    if(ua.match(/MicroMessenger/i)=='micromessenger'){
        return true;
    }else{
        return false;
    }
}</pre>

<hr>
<h2>13、audio元素和video元素在ios和andriod中无法自动播放</h2>

<p><strong>原因：</strong>因为各大浏览器都为了节省流量，做出了优化，在用户没有行为动作时（交互）不予许自动播放；</p>

<pre>//音频，写法一
&lt;audio src="music/bg.mp3" autoplay loop controls&gt;你的浏览器还不支持哦&lt;/audio&gt;

//音频，写法二
&lt;audio controls="controls"&gt; 
    &lt;source src="music/bg.ogg" type="audio/ogg"&gt;&lt;/source&gt;
    &lt;source src="music/bg.mp3" type="audio/mpeg"&gt;&lt;/source&gt;
    优先播放音乐bg.ogg，不支持在播放bg.mp3
&lt;/audio&gt;

//JS绑定自动播放（操作window时，播放音乐）
$(window).one('touchstart', function(){
    music.play();
})

//微信下兼容处理
document.addEventListener("WeixinJSBridgeReady", function () {
    music.play();
}, false);

//小结
//1.audio元素的autoplay属性在IOS及Android上无法使用，在PC端正常；
//2.audio元素没有设置controls时，在IOS及Android会占据空间大小，而在PC端Chrome是不会占据任何空间；
//3.注意不要遗漏微信的兼容处理需要引用微信JS；</pre>
<hr>
<h2>14、css实现单行文本溢出显示 ...</h2>
<p>直接上效果：相对于多行文本溢出做处理， 单行要简单多，且更容易理解。</p>
<p><img decoding="async" src="//www.runoob.com/wp-content/uploads/2018/03/3313696839-5a8f7bb9864cc_articlex.png"></p>

<p>实现方法:</p>

<pre>overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;</pre>

<p>当然还需要加宽度width属来兼容部分浏览。</p>

<hr>
<h2>15、实现多行文本溢出显示...</h2>
<p>效果：</p>
<p><img decoding="async" src="//www.runoob.com/wp-content/uploads/2018/03/3820353650-5a8f7bb98a123_articlex.png"></p>

<p>实现方法：</p>

<pre>display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;</pre>

<p>适用范围：</p>

<p>因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端；</p>

<p>注：</p>
<p>
1、-webkit-line-clamp 用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：</p>
<p>2、display: -webkit-box; 必须结合的属性，将对象作为弹性伸缩盒子模型显示 。</p>
<p>3、-webkit-box-orient 必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式 。</p>

<p>如果你觉着这样还不够美观， 那么就接着往下看效果：</p>
<p><img decoding="async" src="//www.runoob.com/wp-content/uploads/2018/03/2039871283-5a8f7bb9883e8_articlex.png"></p>

<p><strong>这样 是不是你想要的呢？</strong></p>

<p>实现方法：</p>
<pre>div {
    position: relative;
    line-height: 20px;
    max-height: 40px;
    overflow: hidden;
}

div:after {
    content: "..."; position: absolute; bottom: 0; right: 0; padding-left: 40px;
    background: -webkit-linear-gradient(left, transparent, #fff 55%);
    background: -o-linear-gradient(right, transparent, #fff 55%);
    background: -moz-linear-gradient(right, transparent, #fff 55%);
    background: linear-gradient(to right, transparent, #fff 55%);
}</pre>

<p>不要只顾着吃，要注意胃口，此方法有个弊端 那就是 【未超出行的情况下也会出现省略号】 ，这样会不会很挫！！！ 没办法，只能结合JS 进行优化该方法了。</p>
<p>注：</p>
<ul><li>
1、将height设置为line-height的整数倍，防止超出的文字露出。</li><li>
2、给p::after添加渐变背景可避免文字只显示一半。</li><li>
3、由于ie6-7不显示content内容，所以要添加标签兼容ie6-7（如：<span>…<span/>）；兼容ie8需要将::after替换成:after。</li></ul>

<hr>
<h2>16、让图文不可复制</h2>

<p>这点应该大家 都很熟悉了， 某些时候【你懂的】为了快捷搜索答案，可是打死也不让你复制:</p>

<pre>-webkit-user-select: none; 
-ms-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;</pre>
<hr>
<h2>17、盒子垂直水平居中</h2>

<p>这个问题好像面试必问的吔！反正我是必问的，哈哈！！！ 其实无关多少种实现思路，只要你能实现就可以！</p>

<p>提供4种方法:</p>
<ul><li>
<p>1、定位 盒子宽高已知， position: absolute; left: 50%; top: 50%; margin-left:-自身一半宽度; margin-top: -自身一半高度;</p>
</li><li>
<p>2、table-cell布局 父级 display: table-cell; vertical-align: middle;  子级 margin: 0 auto;</p>
</li><li>
<p>3、定位 + transform ; 适用于 子盒子 宽高不定时； （这里是本人常用方法）</p>
    
<pre>position: relative / absolute;
/*top和left偏移各为50%*/
   top: 50%;
   left: 50%;
/*translate(-50%,-50%) 偏移自身的宽和高的-50%*/
transform: translate(-50%, -50%); 注意这里启动了3D硬件加速哦 会增加耗电量的 （至于何是3D加速 请看浏览器进程与线程篇）</pre>
</li><li>
<p>4、flex 布局</p>
<pre>父级： 
/*flex 布局*/
display: flex;
/*实现垂直居中*/
align-items: center;
/*实现水平居中*/
justify-content: center;</pre>
</li></ul>

<p>再加一种水平方向上居中 ：<span class="marked">margin-left : 50% ; transform: translateX(-50%);</span></p>


<p>那有些网页为了尊重原创，复制的文本 都会被加上一段来源说明，是如何做到的呢？问的好！ 等的就是你这个问题 -_- 。</p>

<p>大致思路：</p>
<ul><li>
1、答案区域监听copy事件，并阻止这个事件的默认行为。</li><li>
2、获取选中的内容（window.getSelection()）加上版权信息，然后设置到剪切板（clipboarddata.setData()）。</li></ul>


<hr>
<h2>18、改变 placeholder 的字体颜色大小</h2>
<p>其实这个方法也就在 PC 端可以，真机上屁用都没有，当时我就哭了。 但还是贴出来吧</p>

<pre>input::-webkit-input-placeholder { 
    /* WebKit browsers */ 
    font-size:14px;
    color: #333;
} 
input::-moz-placeholder { 
    /* Mozilla Firefox 19+ */ 
    font-size:14px;
    color: #333;
} 
input:-ms-input-placeholder { 
    /* Internet Explorer 10+ */ 
    font-size:14px;
    color: #333;
}</pre>

<hr>
<h2>19、最快捷的数组求最大值</h2>
<pre>var arr = [ 1,5,1,7,5,9];
Math.max(...arr)  // 9 </pre>


<hr>
<h2>20、更短的数组去重写法</h2>
 <pre>[...new Set([2,"12",2,12,1,2,1,6,12,13,6])]
 // [2, "12", 12, 1, 6, 13]</pre>


 <hr>
<h2>21、 vue 父子组件嵌套时，组件内部的各个生命周期钩子触发先后顺序</h2>
<p>首先 我们可以把 子组件当做function函数来看待，当父组件 import 子组件的时候， 就当是声明了 并加载了这个函数，在调用的时候才会去执行这个函数（子组件）。那么父子组件中的各个声明周期钩子触发的先后顺序是怎样的呢？如下图：</p>
<p><img decoding="async" src="//www.runoob.com/wp-content/uploads/2018/03/225705772-5a8f7bbc255fe_articlex.png"></p>


<blockquote><p>文章来源：https://segmentfault.com/a/1190000013331105</p></blockquote>

				</div>
			</div>
			<div class="previous-next-links">
			<div class="previous-design-link">← <a href="../w3cnote/python3-basic-datatype.html" rel="prev"> Python3 基础数据类型</a> </div>
			<div class="next-design-link"><a href="../w3cnote/java-protected-keyword-detailed-explanation.html" rel="next"> Java protected 关键字详解</a> →</div>
			</div>
						<div class="article-heading-ad" id="w3cnote-ad728">
			<script async src=""></script>
			<!-- 移动版 自动调整 -->
			<ins class="adsbygoogle"
			     style="display:inline-block;min-width:300px;max-width:970px;width:100%;height:90px"
			     data-ad-client="ca-pub-5751451760833794"
			     data-ad-slot="1691338467"
			     data-ad-format="horizontal"></ins>
			<script>
			(adsbygoogle = window.adsbygoogle || []).push({});
			</script>
			</div>
			<style>
@media screen and (max-width: 768px) {
	#w3cnote-ad728 {
		display: none;
	}
}
p.note-author {
    border-bottom: 1px solid #ddd;
    font-size: 18px;
    font-weight: bold;
    color: #78a15a;
    padding-bottom: 2px;
    margin-bottom: 4px;
}
</style>
<script>
var aid = 19515;
</script>
	</div>
		
	</div>
	<div class="listcol last right-column">




<!--
	<div class="tab tab-light-blue"> 订阅</div>
	<div class="sidebar-box">
		<div class="socialicons">
			<a href="../feed" class="rss">RSS 订阅</a>
		
			<form action="//list.qq.com/cgi-bin/qf_compose_send" method="post">
			<input type="hidden" value="qf_booked_feedback" name="t">
			<input type="hidden" value="4b67b6b6c1f5e792559940cab4aebb8f1126fba880bff1a8" name="id">
			<input class="placeholder" id="feed_email" name="to" value="输入邮箱 订阅笔记" autocomplete="off">
			<input type="submit" value="订阅" class="btn btn-primary">
			</form>
		
		</div>
 
	</div>
-->	



<!--
	<div class="sidebar-box cate-list">
	<div class="sidebar-box recommend-here list-link">
			<a href="javascript:void(0);" style="font-size: 16px; color:#64854c;font-weight:bold;">笔记列表</a>
		</div>

 

</div>
-->

	 <div class="sidebar-box cate-list">
		 		

	 	<div class="sidebar-box recommend-here list-link">
			<a href="javascript:void(0);" style="font-size: 16px; color:#64854c;font-weight:bold;">教程列表</a>
		</div>
		
		<div class="cate-items"> 
				<a href="../ado">ADO 教程</a>
	<a href="../ajax">Ajax 教程</a>
	<a href="../android">Android 教程</a>
	<a href="../angularjs2">Angular2 教程</a>
	<a href="../angularjs">AngularJS 教程</a>
	<a href="../appml">AppML 教程</a>
	<a href="../asp">ASP 教程</a>
	<a href="../aspnet">ASP.NET 教程</a>
	<a href="../bootstrap">Bootstrap 教程</a>
	<a href="../bootstrap4">Bootstrap4 教程</a>
	<a href="../bootstrap5">Bootstrap5 教程</a>
	<a href="../cprogramming">C 教程</a>
	<a href="../csharp">C# 教程</a>
	<a href="../cplusplus">C++ 教程</a>
	<a href="../chartjs">Chart.js 教程</a>
	<a href="../cssref">CSS 参考手册</a>
	<a href="../css">CSS 教程</a>
	<a href="../css3">CSS3 教程</a>
	<a href="../django">Django 教程</a>
	<a href="../docker">Docker 教程</a>
	<a href="../dtd">DTD 教程</a>
	<a href="../echarts">ECharts 教程</a>
	<a href="../eclipse">Eclipse 教程</a>
	<a href="../firebug">Firebug 教程</a>
	<a href="../font-awesome">Font Awesome 图标</a>
	<a href="../foundation">Foundation 教程</a>
	<a href="../git">Git 教程</a>
	<a href="../go">Go 语言教程</a>
	<a href="../googleapi">Google 地图 API 教程</a>
	<a href="../highcharts">Highcharts 教程</a>
	<a href="../htmldom">HTML DOM 教程</a>
	<a href="../tags">HTML 参考手册</a>
	<a href="../charsets">HTML 字符集</a>
	<a href="../html">HTML 教程</a>
	<a href="../http">HTTP 教程</a>
	<a href="../ionic">ionic 教程</a>
	<a href="../ios">iOS 教程</a>
	<a href="../java">Java 教程</a>
	<a href="../jsref">JavaScript 参考手册</a>
	<a href="../js">Javascript 教程</a>
	<a href="../jeasyui">jQuery EasyUI 教程</a>
	<a href="../jquerymobile">jQuery Mobile 教程</a>
	<a href="../jqueryui">jQuery UI 教程</a>
	<a href="../jquery">jQuery 教程</a>
	<a href="../json">JSON 教程</a>
	<a href="../jsp">JSP 教程</a>
	<a href="../julia">Julia 教程</a>
	<a href="../kotlin">Kotlin 教程</a>
	<a href="../linux">Linux 教程</a>
	<a href="../lua">Lua 教程</a>
	<a href="../markdown">Markdown 教程</a>
	<a href="../matplotlib">Matplotlib 教程</a>
	<a href="../maven">Maven 教程</a>
	<a href="../memcached">Memcached 教程</a>
	<a href="../mongodb">MongoDB 教程</a>
	<a href="../mysql">MySQL 教程</a>
	<a href="../nodejs">Node.js 教程</a>
	<a href="../numpy">NumPy 教程</a>
	<a href="../pandas">Pandas 教程</a>
	<a href="../perl">Perl 教程</a>
	<a href="../php">PHP 教程</a>
	<a href="../postgresql">PostgreSQL 教程</a>
	<a href="../python3">Python 3 教程</a>
	<a href="../python">Python 基础教程</a>
	<a href="../r">R 教程</a>
	<a href="../rdf">RDF 教程</a>
	<a href="../react">React 教程</a>
	<a href="../redis">Redis 教程</a>
	<a href="../rss">RSS 教程</a>
	<a href="../ruby">Ruby 教程</a>
	<a href="../rust">Rust 教程</a>
	<a href="../sass">Sass 教程</a>
	<a href="../scala">Scala 教程</a>
	<a href="../scipy">SciPy 教程</a>
	<a href="../servlet">Servlet 教程</a>
	<a href="../soap">SOAP 教程</a>
	<a href="../sql">SQL 教程</a>
	<a href="../sqlite">SQLite 教程</a>
	<a href="../svg">SVG 教程</a>
	<a href="../svn">SVN 教程</a>
	<a href="../swift">Swift 教程</a>
	<a href="../tcpip">TCP/IP 教程</a>
	<a href="../typescript">TypeScript 教程</a>
	<a href="../vbscript">VBScript 教程</a>
	<a href="../vue2">Vue.js 教程</a>
	<a href="../vue3">Vue3 教程</a>
	<a href="../w3c">W3C 教程</a>
	<a href="../webservices">Web Service 教程</a>
	<a href="../wsdl">WSDL 教程</a>
	<a href="../xlink">XLink 教程</a>
	<a href="../dom">XML DOM 教程</a>
	<a href="../schema">XML Schema 教程</a>
	<a href="../xml">XML 教程</a>
	<a href="../xpath">XPath 教程</a>
	<a href="../xquery">XQuery 教程</a>
	<a href="../xslfo">XSLFO 教程</a>
	<a href="../xsl">XSLT 教程</a>
	<a href="../data-structures">数据结构</a>
	<a href="../regexp">正则表达式</a>
	<a href="../quiz">测验</a>
	<a href="../browsers">浏览器</a>
	<a href="../quality">网站品质</a>
	<a href="../web">网站建设指南</a>
	<a href="../hosting">网站服务器教程</a>
	<a href="../design-pattern">设计模式</a>
			
		</div> 
		 	 </div>
</div>
	</div>
</div>


<!-- 底部 -->
<div id="footer" class="mar-t50">
   <div class="runoob-block">
    <div class="runoob cf">
     <dl>
      <dt>
       在线实例
      </dt>
      <dd>
       &middot;<a target="_blank" href="../html/html-examples.html">HTML 实例</a>
      </dd>
      <dd>
       &middot;<a target="_blank" href="../css/css-examples.html">CSS 实例</a>
      </dd>
      <dd>
       &middot;<a target="_blank" href="../js/js-examples.html">JavaScript 实例</a>
      </dd>
      <dd>
       &middot;<a target="_blank" href="../ajx/ajax-examples.html">Ajax 实例</a>
      </dd>
       <dd>
       &middot;<a target="_blank" href="../jquery/jquery-examples.html">jQuery 实例</a>
      </dd>
      <dd>
       &middot;<a target="_blank" href="../xml/xml-examples.html">XML 实例</a>
      </dd>
      <dd>
       &middot;<a target="_blank" href="../java/java-examples.html">Java 实例</a>
      </dd>
     
     </dl>
     <dl>
      <dt>
      字符集&工具
      </dt>
      <dd>
       &middot; <a target="_blank" href="../charsets/html-charsets.html">HTML 字符集设置</a>
      </dd>
      <dd>
       &middot; <a target="_blank" href="../tags/html-ascii.html">HTML ASCII 字符集</a>
      </dd>
     <dd>
       &middot; <a target="_blank" href="https://c.runoob.com/front-end/6939/">JS 混淆/加密</a>
      </dd> 
      <dd>
       &middot; <a target="_blank" href="https://c.runoob.com/front-end/6232/">PNG/JPEG 图片压缩</a>
      </dd>
      <dd>
       &middot; <a target="_blank" href="../tags/html-colorpicker.html">HTML 拾色器</a>
      </dd>
      <dd>
       &middot; <a target="_blank" href="..//c.runoob.com/front-end/53">JSON 格式化工具</a>
      </dd>
      <dd>
       &middot; <a target="_blank" href="..//c.runoob.com/front-end/6680/">随机数生成器</a>
      </dd>
     </dl>
     <dl>
      <dt>
       最新更新
      </dt>
                   <dd>
       &middot;
      <a href="../matplotlib/matplotlib-imread.html" title="Matplotlib imread() 方法">Matplotlib imre...</a>
      </dd>
              <dd>
       &middot;
      <a href="../matplotlib/matplotlib-imsave.html" title="Matplotlib imsave() 方法">Matplotlib imsa...</a>
      </dd>
              <dd>
       &middot;
      <a href="../matplotlib/matplotlib-imshow.html" title="Matplotlib imshow() 方法">Matplotlib imsh...</a>
      </dd>
              <dd>
       &middot;
      <a href="../matplotlib/matplotlib-hist.html" title="Matplotlib 直方图">Matplotlib 直方图</a>
      </dd>
              <dd>
       &middot;
      <a href="../python3/python-func-object.html" title="Python object() 函数">Python object()...</a>
      </dd>
              <dd>
       &middot;
      <a href="../python3/python-ai-draw.html" title="Python AI 绘画">Python AI 绘画</a>
      </dd>
              <dd>
       &middot;
      <a href="../w3cnote/cursor-editor.html" title="神辅助 Cursor 编辑器，加入 GPT-4 让编码更轻松！">神辅助 Cursor ...</a>
      </dd>
             </dl>
     <dl>
      <dt>
       站点信息
      </dt>
      <dd>
       &middot;
       <a target="_blank" href="mailto:admin@runoob.com" rel="external nofollow">意见反馈</a>
       </dd>
      <dd>
       &middot;
      <a target="_blank" href="../disclaimer">免责声明</a>
       </dd>
      <dd>
       &middot;
       <a target="_blank" href="../aboutus">关于我们</a>
       </dd>
      <dd>
       &middot;
      <a target="_blank" href="../archives">文章归档</a>
      </dd>
    
     </dl>
    
     <div class="search-share">
      <div class="app-download">
        <div>
         <strong>关注微信</strong>
        </div>
      </div>
      <div class="share">
      <img width="128" height="128" src="/wp-content/themes/runoob/assets/images/qrcode.png" />
       </div>
     </div>
     
    </div>
   </div>
   <div class="w-1000 copyright">
     Copyright &copy; 2013-2023    <strong><a href="../" target="_blank">菜鸟教程</a></strong>&nbsp;
    <strong><a href="../" target="_blank">runoob.com</a></strong> All Rights Reserved. 备案号：<a target="_blank" rel="nofollow" href="https://beian.miit.gov.cn/">闽ICP备15012807号-1</a>
   </div>
  </div>
  <div class="fixed-btn">
    <a class="go-top" href="javascript:void(0)" title="返回顶部"> <i class="fa fa-angle-up"></i></a>
    <a class="qrcode"  href="javascript:void(0)" title="关注我们"><i class="fa fa-qrcode"></i></a>
    <a class="writer" style="display:none" href="javascript:void(0)"   title="标记/收藏"><i class="fa fa-star" aria-hidden="true"></i></a>
    <!-- qrcode modal -->
    <div id="bottom-qrcode" class="modal panel-modal hide fade in">
      <h4>微信关注</h4>
      <div class="panel-body"><img alt="微信关注" width="128" height="128" src="/wp-content/themes/runoob/assets/images/qrcode.png"></div> 
    </div>
  </div>

 <div style="display:none;">
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-84264393-2"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-84264393-2');
</script>
<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?3eec0b7da6548cf07db3bc477ea905ee";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>

</div>
<script>
window.jsui={
    www: 'https://www.runoob.com',
    uri: 'https://www.runoob.com/wp-content/themes/runoob'
};
</script>

<script src=""></script>
<script src=""></script>

</body>
</html>